<template>
	<view>
		<view class="container u-skeleton">
			<navBar :isActive='1'></navBar>
			<!-- swiper -->
			<u-swiper :list="imglist" :effect3d="true" class="swiper u-skeleton-rect"></u-swiper>
			<!-- 宫格 -->
			<view class="gridSwiper">
				<scroll-view scroll-x="true" style="height:160rpx;">
					<view class="grid-item" v-for="(item, index) in gridList" :key="index">
						<navigator url="...">
							<u-image width="70%" :src="item.img" shape="circle" mode="widthFix"></u-image>
							<text class="grid-text">{{ item.text }}</text>
						</navigator>
					</view>
				</scroll-view>
			</view>
			<!-- 歌单推荐 -->
			<view v-if="lookPageBlocks[0]">
				<column :title="lookPageBlocks[0].uiElement.subTitle.title" :btnText="lookPageBlocks[0].uiElement.button.text">
					<!-- 内容部分 -->
					<view class="gdjxz-item" v-for="(item,index) in lookPageBlocks[0].creatives" :style="index==lookPageBlocks[0].creatives.length-1?('margin-right:0px'):('margin-right:20rpx')">
						<navigator :url="`/pages/playListDetail/playListDetail?playListId=${item.creativeId}`">
							<view class="gdjxz-item-playCount">
								<u-icon name="play-right" color="#fff" size="24"></u-icon>
								<text>{{ item.resources[0].resourceExtInfo.playCount | playCountFormat }}</text>
							</view>
							<view class="gdjxz-item-img u-skeleton-fillet">
								<u-image width="100%" :src="item.uiElement.image.imageUrl" mode="widthFix"></u-image>
							</view>
							<view class="gdjxz-item-text">
								{{item.uiElement.mainTitle.title}}
							</view>
						</navigator>
					</view>
				</column>
			</view>
			<!-- 风格推荐 -->
			<view v-if="lookPageBlocks[1]" style="margin-top: 20rpx;">
				<column :title="lookPageBlocks[1].uiElement.subTitle.title" :btnText="lookPageBlocks[1].uiElement.button.text"
				 :scrollViewHeight="480">
					<!-- 内容部分 -->
					<view class="styleTj-item" v-for="(item,index) in lookPageBlocks[1].creatives" :style="index==lookPageBlocks[1].creatives.length-1?('margin-right:0px'):('margin-right:20rpx')">
						<view class="styleTj-item-childItem" v-for="(childItem,cIndex) in item.resources">
							<navigator url="...">
								<view class="styleTj-item-childItem-img u-skeleton-fillet">
									<u-image width="100%" :src="childItem.uiElement.image.imageUrl" mode="widthFix"></u-image>
								</view>
								<view class="styleTj-item-childItem-title">
									{{childItem.uiElement.mainTitle.title}}
									<view class="styleTj-item-childItem-subTitle" v-if="childItem.uiElement.subTitle">
										<text>
											{{childItem.uiElement.subTitle.title}}
										</text>
									</view>
								</view>
								<view class="styleTj-item-childItem-playBtn">
									<u-icon name="play-circle" color="#fe3a3b" size="60"></u-icon>
								</view>
							</navigator>
						</view>
					</view>
				</column>
			</view>
			<!-- 音乐日历 -->
			<view class="musicCalendar">
				<view class="musicCalendar-title">
					<u-image class="musicCalendar-title-img" width="6%" src="http://123.56.1.202/xxch/images/musicCalendar.png" mode="widthFix"></u-image>
					音乐日历
				</view>
				<view class="musicCalendar-content">
					<navigator url="...">
						<swiper class="musicCalendar-content-swiper" autoplay="true" interval="2000" circular='true'>
							<swiper-item v-for="(item,index) in musicCalendarList" :key='index'>
								<view class="musicCalendar-content-swiper-item">
									<view class="musicCalendar-content-swiper-item-title">
										{{item.title}}
									</view>
									<u-image class="musicCalendar-content-swiper-item-img" width="20%" :src="item.imgUrl" mode="widthFix"></u-image>
								</view>
							</swiper-item>
						</swiper>
					</navigator>
				</view>
			</view>
			<!-- 官方歌单 -->
			<view v-if="lookPageBlocks[3]" style="margin-top: 20rpx;margin-bottom: 100rpx;">
				<column :title="lookPageBlocks[3].uiElement.subTitle.title" :btnText="lookPageBlocks[3].uiElement.button.text">
					<!-- 内容部分 -->
					<view class="gdjxz-item" v-for="(item,index) in lookPageBlocks[3].creatives" :style="index==lookPageBlocks[3].creatives.length-1?('margin-right:0px'):('margin-right:20rpx')">
						<navigator url="../../App">
							<view class="gdjxz-item-playCount">
								<u-icon name="play-right" color="#fff" size="24"></u-icon>
								<text>{{ item.resources[0].resourceExtInfo.playCount }}</text>
							</view>
							<view class="gdjxz-item-img u-skeleton-fillet">
								<u-image width="100%" :src="item.uiElement.image.imageUrl" mode="widthFix"></u-image>
							</view>
							<view class="gdjxz-item-text">
								{{item.uiElement.mainTitle.title}}
							</view>
						</navigator>
					</view>
				</column>
			</view>
			<!-- 云村精选 -->
			<!-- 直播 -->
			<!-- 大家都在听 -->
			<!-- 电台推荐 -->
			<!-- 音乐底部栏 -->
			<musicBar :musicInfo='musicInfo' v-if='musicInfo' />
		</view>
		<!--引用骨架屏组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#eee" el-color="#ddd"></u-skeleton>
		<!-- 无网络提示 -->
		<u-no-network></u-no-network>
	</view>
	</view>
</template>

<script>
	import column from '@/components/column.vue'
	import navBar from "@/components/nav-bar.vue"
	import musicBar from "@/components/musicBar.vue"
	export default {
		components: {
			navBar,
			column,
			musicBar
		},
		data() {
			return {
				// cookie
				cookie: '',
				loading: true, // 是否显示骨架屏组件
				// 轮播图
				imglist: [],
				// 首页-发现
				lookPageBlocks: [],
				musicCalendarList: [],
				// 
				gridList: [{
						img: require('@/static/images/mrtj.png'),
						text: '每日推荐'
					},
					{
						img: require('@/static/images/srfm.png'),
						text: '私人FM'
					},
					{
						img: require('@/static/images/gd.png'),
						text: '歌单'
					},
					{
						img: require('@/static/images/phb.png'),
						text: '排行榜'
					},
					{
						img: require('@/static/images/zb.png'),
						text: '直播'
					},
					{
						img: require('@/static/images/dt.png'),
						text: '电台'
					},
					{
						img: require('@/static/images/szzj.png'),
						text: '数字专辑'
					},
					{
						img: require('@/static/images/cl.png'),
						text: '唱聊'
					}
				],
				musicInfo: null

			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getBanner();
			this.getHomeBlocks();
			setTimeout(function() {
				// 关闭下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 监听页面触底事件
		onReachBottom() {
			// console.log("页面触底了")
		},
		created() {},
		onLoad() {
			this.getBanner();
			this.getHomeBlocks();
			this.getHomeDragon();
			this.getMusicCalendar();
		},
		onShow() {},
		methods: {
			// 请求音乐日历
			getMusicCalendar() {
				this.cookie = this.$gm.getStorage('cookie');
				this.myRequest({
					url: this.api.calendar,
					data: {
						startTime: this.$gm.getDate('yesterday'),
						endTime: this.$gm.getDate('tomorrow'),
						cookie: this.cookie
					}
				}).then(res => {
					this.musicCalendarList = res.data.data.calendarEvents;
					// console.log(res.data.data);
				})
			},

			// 发起请求 获取首页轮播图
			getBanner() {
				this.myRequest({
					url: this.api.banner,
					method: 'POST',
					data: {
						type: 2
					}
				}).then(res => {
					res.data.banners.forEach(item => {
						this.imglist.push(item.pic);
						this.loading = false;
					})
				})
			},

			// 获取APP首页信息,首页-发现
			async getHomeBlocks() {
				var res = await this.myRequest({
					url: this.api.homeBlock,
				});
				// console.log(res.data.data.blocks)
				res.data.data.blocks.forEach((item,index) =>{
					if(index > 0){
						this.lookPageBlocks.push(item)
					}
				})
				
				this.loading = false;
				console.log(this.lookPageBlocks);
			},

			// 获取APP首页圆形图标入口列表
			getHomeDragon() {
				this.myRequest({
					url: this.api.homeDragon,
				}).then(res => {
					// console.log(res)
					this.loading = false;
				})
			},



		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fbfbfb;
	}

	.container {
		width: 100%;
		font-size: 14px;
		overflow: hidden;
		padding: 30rpx;
		position: relative;
		background-color: #f8f7f7;
	}

	.swiper {
		padding-top: 160rpx;
	}

	.gridSwiper {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		margin-bottom: 20rpx;
		margin-top: 40rpx;

		.grid-item {
			width: 20%;
			display: inline-block;
			text-align: center;

			navigator {
				width: 100%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
			}
		}
	}

	.grid-text {
		color: #333333;
	}

	// 歌单推荐
	.gdjxz-item {
		width: 30%;
		display: inline-block;
		position: relative;

		.gdjxz-item-playCount {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 40rpx;
			text-align: right;
			color: #fff;
			z-index: 100;
			font-size: 24rpx;
			padding-right: 14rpx;
		}

		.gdjxz-item-img {
			border-radius: 20rpx;
			overflow: hidden;
		}

		.gdjxz-item-text {
			width: 100%;
			height: 64rpx;
			// 文字过长自动换行
			word-break: break-all;
			white-space: normal;
			font-size: 24rpx;
			text-align: left;
			// 文字过长，显示省略号
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
		}
	}

	// 风格推荐
	.styleTj-item {
		width: 95%;
		display: inline-block;

		.styleTj-item-childItem {
			margin-bottom: 20rpx;

			navigator {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.styleTj-item-childItem-img {
					width: 20%;
					border-radius: 20rpx;
					overflow: hidden;
				}

				.styleTj-item-childItem-title {
					width: 60%;
					text-align: left;
					text-indent: 1em;
					// 文字过长，显示省略号
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;

					.styleTj-item-childItem-subTitle {

						text {
							background-color: #f8dfe3;
							color: #e52f46;
							padding: 8rpx;
							font-size: 20rpx;
						}
					}
				}

				.styleTj-item-childItem-playBtn {
					width: 10%;
					text-align: center;
					margin-left: 2%;
					margin-right: 2%;
				}
			}
		}
	}

	// 音乐日历
	.musicCalendar {
		width: 100%;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;

		.musicCalendar-title {
			display: flex;
			align-items: center;
			color: #ff3a3b;
			font-weight: bold;
			font-size: 32rpx;

			.musicCalendar-title-img {
				margin-top: 10rpx;
				margin-right: 10rpx;
			}
		}

		.musicCalendar-content {
			height: 140rpx;
			margin-top: 30rpx;

			navigator {
				height: 100%;
			}

			.musicCalendar-content-swiper {
				height: 100%;

				.musicCalendar-content-swiper-item {
					display: flex;
					justify-content: space-around;
					align-items: center;

					.musicCalendar-content-swiper-item-title {
						width: 80%;
						// 文字过长，显示省略号
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
					}

					.musicCalendar-content-swiper-item-img {
						width: 20%;
						border-radius: 20rpx;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>
